<!-- Author:Rain -->

<template>
    <div class="rain-form-item">
        <div class="rain-item-lable">
            <span style="font-weight: 600;font-size: 16px;">{{ title }}</span>
        </div>
        <div class="rain-item-content">
            <div class="ipt-wrap">
                <div :style="{ border: borderShow ? `1px solid var(--themeColor)` : '' }"
                    class="input-wrap input-wrap-textarea">
                    <textarea v-model="text" @focus="borderShow = true" @input="todoSend" @blur="borderShow = false" wrap="soft"
                        autocomplete="on" spellcheck="false" :placeholder="placeholder" rows="8" maxlength="200"
                        class="input"></textarea>
                    <span class="suffix-counter"><em class="">{{ text.length }}</em>/200</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
let props = defineProps(["placeholder", "title", "value"])
let emit=defineEmits(['sendText'])
let { value } = markRaw(props)
let text = ref(value||"")
/* 边框展示，注意 */
let borderShow = ref(false)
function todoSend(){
    emit("sendText",text.value)
}


</script>

<style scoped>
@import url(./css/formitems.css);

.rain-form-item{
    width: 100%;
    height: 100%;
}

.rain-form-item .rain-item-content{
    height: auto;
}

.ipt-wrap {
    width: 100%;
}

.input-wrap {
    position: relative;
    display: inline-block;
    min-width: 360px;
    vertical-align: middle;
    line-height: normal;
    border: 1px rgba(169, 156, 156, 0.5) solid;
    box-sizing: content-box;
}

.input-wrap:hover {
    border: 1px solid var(--themeColor);
}

.input-wrap-textarea {
    min-width: 100%;
    width: 100%;
    background-color: #f8f8f8;
    border-radius: 8px;
    overflow: hidden;
}

textarea.input {
    min-width: 97.8%;
    width: 90%;
    padding: 10px 16px 5px;
    margin-bottom: 44px;
    background-color: #f8f8f8;
    border: none;
    height: auto;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    min-height: 34px;
    vertical-align: bottom;
    font-size: 14px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.suffix-counter {
    position: absolute;
    background-color: #fff;
    padding-left: 5px;
    height: 24px;
    line-height: 24px;
    right: 10px;
    top: 50%;
    border-radius: 5px;
    font-size: 12px;
    color: #9fa3b0;
    transform: translateY(-50%);
    background-color: #f8f8f8;
    top: auto;
    bottom: 5px;
    transform: translateY(0);
}
</style>